<template>
  <div>
    <div class="title">
      <h6></h6>
      失信公告
    </div>
    <div class="content">
      <div class="table" v-if="list">
        <el-table
          :data="list"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          >
          <!-- <el-table-column prop="number" label="序号" width="60" align="center">
          </el-table-column> -->
          <el-table-column prop="casenum" label="案号" min-width="260" align="center">
            <template slot-scope="scope">{{ scope.row.casenum | getData }}</template>
          </el-table-column>
          <el-table-column prop="sxfb" label="立案日期" min-width="180" align="center">
            <template slot-scope="scope">{{ scope.row.sxfb | getData }}</template>
          </el-table-column>
          <el-table-column prop="sxdw" label="做出执行依据单位" min-width="220" align="center">
            <template slot-scope="scope">{{ scope.row.sxdw | getData }}</template>
          </el-table-column>
          <el-table-column prop="sxwh" label="执行依据文号" min-width="240" align="center">
            <template slot-scope="scope">{{ scope.row.sxwh | getData }}</template>
          </el-table-column>
          <el-table-column
            prop="sxjt"
            label="失信被执行人行为具体情形"
            min-width="250"
            align="center"
          >
            <template slot-scope="scope">{{ scope.row.sxjt | getData }}</template>
          </el-table-column>
          <el-table-column prop="sxlx" label="被执行履行情况" min-width="250" align="center">
            <template slot-scope="scope">{{ scope.row.sxlx | getData }}</template>
          </el-table-column>
          <el-table-column prop="" label="详情" min-width="150" align="center" fixed="right">
            <template slot-scope="scope"
              ><span
                style="color: #0a7be0; cursor: pointer; text-decoration: underline"
                @click="examine(scope.$index, list)"
                >查看</span
              ></template
            >
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination" v-if="list">
        <el-pagination
          background
          layout="prev, pager, next"
          @next-click="nextClick()"
          @prev-click="prevClick()"
          @current-change="handlePageChange"
          :total="pages * 10"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="失信公告详情" :visible.sync="dialogVisible" width="50%">
      <div class="dialog-center" v-if="tableData">
        <table id="table">
          <tbody id="tbody">
            <tr>
              <td scope="row" class="td">案号</td>
              <td scope="row">{{ tableData.casenum }}</td>
              <td scope="row" class="td">立案时间</td>
              <td scope="row">{{ tableData.sxfb }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">做出执行依据单位</td>
              <td scope="row">{{ tableData.sxdw }}</td>
              <td scope="row" class="td">执行依据文号</td>
              <td scope="row">{{ tableData.sxwh }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">失信被执行人行为具体情形</td>
              <td scope="row">{{ tableData.sxjt }}</td>
              <td scope="row" class="td">被执行人履行情况</td>
              <td scope="row">{{ tableData.sxlx }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">生效法律文书确定的义务</td>
              <td scope="row" colspan="3">
                {{ tableData.content }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { myPostFetch } from '@/api/report'
export default {
  props: {
    name: String
  },
  data() {
    return {
      dialogVisible: false,
      tableData: null,
      pageNum: 1,
      pageSize: 10,
      pages: 1,
      list: null
    }
  },
  // 过滤器
  filters: {
    getArea: function (value) {
      value = parseFloat(value)
      if (value == 0) return '-'
      if (!value) return '-'
      // 将数值截取，保留两位小数
      value = value.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getData: function (value) {
      if (value) return value
      let date = '-'
      return date
    }
  },
  mounted() {
    this.findkjapply()
  },
  methods: {
    // 点击查看
    examine(index, item) {
      this.dialogVisible = true
      this.tableData = item[index]
    },
    // 获取信息
    async findkjapply() {
      let url = '/credit/getShixin'
      let params = {
        name: this.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pages: 1
      }
      let data = await myPostFetch(url, params)
      if (data.code == 500) return (this.list = [])
      this.list = data.rows
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].number = (this.pageNum - 1) * 10 + i + 1
      }
      this.pages = Math.ceil(data.total / this.pageSize)
    },
    //点击下一页
    nextClick() {
      this.pageNum += 1
      this.findkjapply()
    },
    //点击上一页
    prevClick() {
      this.pageNum -= 1
      this.findkjapply()
    },
    //点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage
      this.findkjapply()
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.title {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 0.0938rem;
  font-weight: bold;
  color: #333333;
  margin: 0.1302rem 0;
  h6 {
    width: 0.026rem;
    height: 0.0938rem;
    background-color: #0a7be0;
    margin-right: 0.0521rem;
  }
  .content {
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    // 表格
    .table {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      height: 100%;
      margin-bottom: 0.1042rem;
      cursor: pointer;
      overflow: auto;
      .span {
        display: inline-block;
        // width: 0.1563px;
        // height: 0.125px;
        font-size: 0.0781rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 0.026rem;
        color: #ccc;
        border-bottom: 0.0052rem solid #ccc;
        cursor: pointer;
        margin-right: 0.0521rem;
      }
      .span1 {
        display: inline-block;
        font-size: 0.0781rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 0.026rem;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
        cursor: pointer;
      }
      .nactive {
        font-size: 0.0729rem;
        margin-right: 0.026rem;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
      }
      .state-bar {
        span {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #606266;
          margin-right: 0.0521rem;
        }
      }
    }
    // 分页器
    .pagination {
      display: flex;
      padding: 0.1042rem 0.1563rem 0.0521rem 0.0521rem;
      justify-content: right;
      position: absolute;
      bottom: 0.2083rem;
      right: 0.1042rem;
      span {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #666666;
        margin-top: 0.0104rem;
      }
    }
  }
}
::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}
// 表格样式
::v-deep .el-table th.el-table__cell > .cell {
  font-size: 0.0833rem;
}
::v-deep.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.0781rem;
  font-size: 0.0833rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 0.0781rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0781rem;
  }
}
// 弹出框
.dialog-center {
  box-sizing: border-box;
  padding: 0 0.026rem;
  // display: flex;
  // justify-content: center;
  width: 100%;
  // height: 660px;
}
// 表格
table {
  // width: 600px;
  margin-bottom: 0.1563rem;
  border-collapse: collapse;
}
table td {
  width: 1.5625rem;
  box-sizing: border-box;
  height: 0.2188rem;
  border: 0.0052rem solid #dbdbdb;
  padding: 0.0521rem 0.1042rem;
  font-size: 0.0781rem;
  font-family: SourceHanSansSC-Light;
  font-weight: 500;
  color: #545454;
  line-height: 0.1354rem;
}
table .td {
  width: 1.5625rem;
  font-size: 0.0781rem;
  font-weight: 500;
  color: #000000;
  text-align: center;
  background-color: #f2f9fc;
}
</style>
<style lang="scss">
/* 分页器 */
.el-pagination.is-background .el-pager li {
  border-radius: 0.1042rem;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 0.0729rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0729rem;
  }
}
.el-table tr {
  height: 0.2083rem;
}
.el-table .el-table thead {
  height: 0.2083rem;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
</style>
